import { IvButton, PrismView } from "@/components"
import text from './text/index'
import { useEffect, useState } from 'react'
import { Collapse } from "antd"
import Prism from 'prismjs';
import ButtonDom from './text/buttonDom'
import ModalDom from './text/modalDom'
function Index() {
  const [routerText, setrouterText] = useState('')
  const [sidebarText, setsidebarText] = useState('')
  const [buttonText, setbuttonText] = useState('')
  const [modalText, setmodalText] = useState('')

  useEffect(() => {
    const routerText = Prism.highlight(text.routerText, Prism.languages.javascript, 'javascript')
    const sidebarText = Prism.highlight(text.sidebarText, Prism.languages.javascript, 'javascript')
    const buttonText = Prism.highlight(text.buttonText, Prism.languages.javascript, 'javascript')
    const modalText = Prism.highlight(text.modalText, Prism.languages.javascript, 'javascript')
    setrouterText(routerText)
    setsidebarText(sidebarText)
    setbuttonText(buttonText)
    setmodalText(modalText)
  }, [])
  return (
    <div className="index-box">
      <Collapse defaultActiveKey={[]} >
        <Collapse.Panel header="路由的使用" key="1">
          <pre style={{ whiteSpace: 'pre-wrap' }}>
            <div className="language-css" dangerouslySetInnerHTML={{ __html: routerText }}></div>
          </pre>
        </Collapse.Panel>
        <Collapse.Panel header="按钮的使用" key="2">
          <ButtonDom></ButtonDom>
          <pre style={{ whiteSpace: 'pre-wrap' }}>
            <div className="language-css" dangerouslySetInnerHTML={{ __html: buttonText }}></div>
          </pre>
        </Collapse.Panel>
        <Collapse.Panel header="侧边栏的使用" key="3">
          <pre style={{ whiteSpace: 'pre-wrap' }}>
            <div className="language-css" dangerouslySetInnerHTML={{ __html: sidebarText }}></div>
          </pre>
        </Collapse.Panel>
        <Collapse.Panel header="弹窗的使用" key="4">
          <ModalDom></ModalDom>
          <pre style={{ whiteSpace: 'pre-wrap' }}>
            <div className="language-css" dangerouslySetInnerHTML={{ __html: modalText }}></div>
          </pre>
        </Collapse.Panel>
      </Collapse>


    </div>
  )
}
export default Index